<!--用户设置-->
<template>
    <div class="page-container" id="UserSettings">
        <el-tabs type="border-card" @tab-click="handClick" v-model="activeName">
            <el-tab-pane name="person">
                <span slot="label"><i class="el-icon-user"></i> 个人中心</span>
            </el-tab-pane>
            <el-tab-pane name="pageManager">
                <span slot="label"><i class="el-icon-setting"></i> 页面设置</span>
            </el-tab-pane>
            <el-tab-pane name="role" v-if="isShow">
                <span slot="label"><i class="el-icon-setting"></i> 角色管理</span>
            </el-tab-pane>
        </el-tabs>
        <div class="setting-bottom">
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
    import {mapState} from 'vuex';

    export default {
        name: "UserSettings",
        data() {
            return {
                activeName: "person",
                isShow: false
            }
        },
        mounted() {
            if (this.user.user_role === 0 || this.user.user_role === 1) {
                this.isShow = true;
            } else {
                this.isShow = false;
                this.activeName = "person";
                if (this.$route.fullPath === '/PersonalCenter') {
                    return;
                }
                this.$router.push('/PersonalCenter');
            }
        },
        computed: mapState(["user"]),
        watch: {
            user() {
                if (this.user.user_role === 0 || this.user.user_role === 1) {
                    this.isShow = true;
                } else {
                    this.isShow = false;
                    this.activeName = "person";
                    if (this.$route.fullPath === '/PersonalCenter') {
                        return;
                    }
                    this.$router.push('/PersonalCenter');
                }
            }
        },
        methods: {
            handClick(tab) {
                console.log(this.$route)
                switch (tab.name) {
                    case 'person':
                        if (this.$route.fullPath === '/PersonalCenter') {
                            return;
                        }
                        this.$router.push('/PersonalCenter');
                        break;
                    case 'role':
                        if (this.$route.fullPath === '/RoleManage') {
                            return;
                        }
                        this.$router.push('/RoleManage');
                        break;
                    case 'pageManager':
                        if (this.$route.fullPath === '/PageSetting') {
                            return;
                        }
                        this.$router.push('/PageSetting');
                        break;
                }
            }
        }
    }
</script>

<style>
    /*内边距调整*/
    .el-tabs--border-card > .el-tabs__content {
        padding: 0px;
    }
</style>

<style scoped lang="scss">
    .page-container {
        width: 100%;
        height: 100%;
        .setting-bottom {
            width: 100%;
            height: calc(100% - 41px);
        }
    }
</style>